<template>
  <view>
    <view class="custom-nav-bar">
      <image src="/static/community/rectangle48.png" class="nav-bar-bg1" mode="aspectFill"></image>
        <image src="/static/tool/top/_20240323222429.png" mode="" class="nav-bar-bg2"></image>
      <text class="nav-title">猫之论坛</text>
      <my-search :width1="600" :width2="520"></my-search>
        <image src="/static/community/message_message-one.png" mode="" class="nav-bar-bg3" @click="gotoMessage"></image>
    </view>
    
    <view class="cat-com-box">
      <view class="scroll-view-container">
        <scroll-view class="top-scroll-view" scroll-x="true" :style="{ width: wh + 'px' }">
          <block v-for="(item, i) in cateList" :key="i">
                <view :class="['top-scroll-view-item',i === active ? 'active':'']" @click="activeChanged(i)">{{item}}</view>
                </block>
              </scroll-view>
      </view>
    
      <view class="cat-com-article" v-for="(item,i) in cateLevel2" :key="i" @click="gotouserArticle(item)">
        <view class="cat-com-user">
          <image :src="item.user.avatar" mode=""></image>
          <view class="cat-com-user-right">
            <text class="cat-com-user-text1">{{item.user.username}}</text>
            <text class="cat-com-user-text2">{{item.createTime}}</text>
          </view>
        </view>
        <view class="cat-com-main">
          <text>{{item.title}}</text>
          <image :src="item.imgs[0] || defaultPic" mode=""></image>
        </view>
        <view class="cat-article-btm">
          <view class="cat-btm-cri">
            <image src="/static/community/main/comment_comment.png" mode=""></image>
            <text>{{item.commentNum}}</text>
          </view>
          <view class="cat-btm-like">
            <image src="/static/community/main/praise_thumbs-up.png" mode=""></image>
            <text>{{item.likeNum}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {getArticleList} from '../../api/article.js'
  export default {
    data() {
      return {
        wh: 0,
        cateList: ['领养','问答','志愿','其他'],
        active: 0,
        cateLevel2: [],
        defaultPic: '../../static/uni.png',
        queryObj: {
              
              pageNum: 1,
              
              pageSize: 6,
              module:1
            },
            isloading: false,
            total: 0
      };
    },
    onLoad(){
      const sysInfo = uni.getSystemInfoSync()
      console.log(sysInfo);
      console.log(sysInfo.windowWidth);
      this.wh = sysInfo.windowWidth 
      
      this.getCateList()
    },
    
    methods:{
      activeChanged(i){
        this.active = i
        console.log(this.active);
        this.queryObj.module = i+1
        this.getCateList(this.queryObj)
        
      },
      gotoMessage(){
       
        uni.navigateTo({
        	url: '/subpkg/my-message/my-message'
        });
      },
      async getCateList(){
        this.isloading = true
        const {data:{data:articles}} = await getArticleList(this.queryObj)
        this.isloading = false
        
        console.log(articles);
        this.cateLevel2 = articles.articles
        this.total = articles.totalPages
        console.log(this.cateLevel2);
        console.log(this.cateLevel2[0].user.username);
      },
      gotouserArticle(item){
        console.log(666);
        uni.navigateTo({
          url: '/subpkg/user-article/user-article?id='+ item.id+ '&username=' + item.user.username + '&avatar=' + item.user.avatar,
        })
      }
    },
   
    
  }
</script>

<style lang="scss">
.custom-nav-bar {  
  position: relative;   
 height: 440rpx; 
    
  .nav-bar-bg1 {
    position: absolute;
    top: 0;
    left: 0;  
    right: 0;  
    width: 100%;  
    height: 100%;  
    z-index: -1;
  }  
  .nav-bar-bg2{
    position: absolute;
    top: -35;
    left: -3;
    width: 308rpx;
    height: 300rpx;
  }
  .nav-title {  
    position: absolute;
    font-size: 25px;
    font-weight: bold;  
    color: #666666;  
    top: 50px;
    left: 25px;
    z-index: 999;
  }
  .nav-bar-bg3{
    position: absolute;
    width: 62rpx;
    height: 62rpx;
    top: 106px;
    right: 25px;
  }
} 

.cat-com-box{
  background-image: url('~@/static/community/main/rectangle57.png');
  background-repeat: no-repeat;
  background-position: -45rpx 0;
  width: 100%;
  height: 1516rpx;
  margin-top: -100rpx;
  .scroll-view-container{
    padding-top: 40rpx;
    width: 100%; 
    overflow: hidden;
    .top-scroll-view{
    white-space: nowrap; 
    display: flex;  
    align-items: center; 
    .top-scroll-view-item{
      background-image: url('~@/static/community/main/rectangle58.png');
      background-repeat: no-repeat;
      background-position: -7rpx -7rpx;
      width: 156rpx;
      height: 100rpx;
      display: inline-block;
      text-align: center;  
       line-height: 100rpx;
       
      margin: 0 20rpx;  
      box-sizing: border-box;  
      
      &.active{
        background-image: url('~@/static/community/main/rectangle59.png');
        background-repeat: no-repeat;
        background-position: -7rpx -7rpx;
      }
    }
    .top-scroll-view-item:first-child {
      margin-left: 50rpx;  
    } 
    .top-scroll-view-item:last-child {
      margin-right: 16rpx;  
    } 
    }
  }
}

.cat-com-article{
  width: 660rpx;
  height: 366rpx;
  background-color: #FFFFFF;
  margin: 50rpx 50rpx;
  .cat-com-user{
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 25rpx;
    padding-top: 10rpx;
    image{
      width: 58rpx;
      height: 58rpx;
      margin-right: 10rpx;
    }
    .cat-com-user-right{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding-top: 25rpx;
      .cat-com-user-text1{
        font-size: 20px;
        color: #333333;
      }
      .cat-com-user-text2{
        font-size: 12px;
        color: #868686;
      }
    }
  }
  .cat-com-main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 85rpx;
    margin-top: 10rpx;
    text{
      font-size: 15px;
      color: #333333;
    }
    image{
      width: 180rpx;
      height: 108rpx;
      margin-top: 5rpx;
    }
  }
  .cat-article-btm{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-top: 25rpx;
    padding-right: 25rpx;
    .cat-btm-cri{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 15rpx;
      image{
        width: 58rpx;
        height: 58rpx;
        margin-right: 15rpx;
      }
      text{
        font-size: 16px;
        font-weight: bold;
        color: #333333;
      }
    }
    .cat-btm-like{
      display: flex;
      justify-content: space-between;
      align-items: center;
      image{
        width: 58rpx;
        height: 58rpx;
        margin-right: 15rpx;
      }
      text{
        font-size: 16px;
        font-weight: bold;
        color: #333333;
      }
    }
  }
}
</style>
